<template>
    <Menu />
    <!-- <webview style="height: calc(100% - 70px);" src="https://www.youdao.com/"></webview> -->
    <div class="search">
        <s-text-field class="inpt"
            style="--border-radius: 24px;--padding: 24px;width: 500px;margin-left:calc(50% - 250px);transition: all 0.2s;"
            label="请输入需要翻译的单词">
            <input type="text" @input="search">
            <s-icon-button slot="end">
                <s-icon type="search" @click="ipcRenderer.send('open_youdao',{ word: searchList.query })"></s-icon>
            </s-icon-button>
        </s-text-field>
        <mdui-list style="margin: 0 auto;width: 500px;">
            <mdui-list-item v-for="(item, index) in searchList.entries" :key="index" :headline="item.entry"
                :description="item.explain" description-line="2" @click="ipcRenderer.send('open_youdao',{ word: item.entry })">
            </mdui-list-item>
        </mdui-list>
    </div>

</template>

<script setup>

import Menu from "@/components/toolsMenu.vue"
import { ref, onMounted } from "vue"
import { useIpcRenderer } from "@vueuse/electron";
const ipcRenderer = useIpcRenderer();
const searchList = ref([])
onMounted(() => {
    /* let webview = document.querySelector("webview")
    webview.addEventListener("dom-ready", () => {
        // 注入
        webview.executeJavaScript(`
            document.getElementsByClassName("product-container")[0].remove()
            document.getElementsByClassName("footer_container")[0].remove()
            document.getElementsByClassName("content-cell")[0].remove()
            document.getElementsByClassName("header_container")[0].remove()

            document.getElementsByClassName("index_page")[0].style.overflowX = ""
            document.getElementsByClassName("index_page")[0].style.marginTop = "20px"
            document.getElementsByClassName("index_page")[0].classList.remove("index_page")
        `)
        webview.insertCSS(`
            .index_page {
                overflow-x: none !important;
                margin-top: -120px !important;
                height: calc(100% - 70px) !important;
            }
         }
        `)
    }) */


})

const search = (e) => {
    let val = e.target.value
    if (val) {
        fetch(host + "/api/tools/youdao?word=" + val).then((res) => {
            res.json()
                .then((data) => {
                    console.log(data)
                    searchList.value = data.data
                }).catch((err) => {
                    console.log(err)
                })
        })
    } else {
        searchList.value = []
    }
}
</script>

<style scoped>
.search {
    margin-top: 30px;
    width: 100%;
}
</style>